<dom-module id="hongliu-login">
    <template>
        <iron-ajax
                id="ajax" method="POST" url="" handle-as="json" content-type="application/json" dataType="jsonp"  headers='X-CSRF-Token": "csrfToken' on-response="handleResponse"></iron-ajax>
        <paper-button on-click="openDialog" raised>Login</paper-button>


        <paper-dialog id="dialog" role="dialog" style="background-color: #0b8043">
            <h2>Login</h2>
            <paper-dialog-scrollable>
                <paper-input
                        name="name"
                        value="{{user.name}}"
                        error-message="Please write  name"
                        type="text" required
                        label="name"
                        id="inputWithButton">
                    <iron-icon icon="account-box" prefix></iron-icon>
                </paper-input>
                <paper-input
                        name="password"
                        value="{{user.password}}"
                        error-message="Please write your password"
                        required
                        type="password"
                        label="Password"
                        id="inputWithButton1">
                    <iron-icon icon="lock" prefix></iron-icon>
                </paper-input>
            </paper-dialog-scrollable>
            <div class="buttons">
                <paper-button on-click="login" >Login</paper-button>
            </div>
        </paper-dialog>
        <iron-ajax
                id="ajax" method="GET" url="" handle-as="json" headers='X-CSRF-Token": "csrfToken' content-type="application/json" dataType="jsonp" on-response="handleResponse">

        </iron-ajax>
        <div class="buttons">
            <paper-button on-click="getAjax" >GET请求</paper-button>
        </div>
    </template>

    <script>
        Polymer({
            is: 'hongliu-login',
            properties: {
                user: {
                    type: Object,
                    value: {}
                },


            },
            openDialog: function(){

                this.$.dialog.open();

            },


            getAjax: function(){
                this.$.ajax.url = "http://127.0.0.1:8080/login";
                // this.$.ajax.crossDomain= false,
                // this.$.ajax.options= {
                //     xhrFields: {
                //         withCredentials: true
                //     }
                // };
                // this.$.ajax.params = {
                //     userId: sessionStorage.getItem('id'),
                //     token: sessionStorage.getItem('token')
                this.$.ajax.generateRequest();
                // };
                console.log(222);
            },
            login: function(){

                var inputs = document.querySelectorAll('#login input'),
                    inputs_length = inputs.length,
                    is_valid = true;

                for( var i = 0; i < inputs_length; i++ ) {
                    is_valid = inputs[i].validate();
                    inputs[i].focus();
                }

                if(is_valid) {
                    this.$.ajax.url = "http://127.0.0.1:8080/login";
                    this.$.ajax.params = this.user;
                    this.$.ajax.crossDomain= false,
                    this.$.ajax.options= {
                        xhrFields: {
                            withCredentials: true
                        }
                    };
                    this.$.ajax.generateRequest();

                }
            },
            handleResponse: function(res) {
                console.log(111);
                var res = res.detail.response;

                console.log(res);
                console.log(222);

                if(res) {
                    sessionStorage.setItem('id', res.id);
                    sessionStorage.setItem('email', res.email)
                    sessionStorage.setItem('token', res.token);
                    window.location = 'makesomenoice';
                }
            }
        });
    </script>
</dom-module>
